<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header">
      <div class="el-page-header__left haruyuki-flex-center haruyuki-size-18" @click="goBack" >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content haruyuki-flex-center">
        <el-image
          style="width: 20px; height: 20px"
          src="/img/merchant-icon/terminal.png"
          fit="fill"
        ></el-image>
        <span class="haruyuki-ml-6">终端管理</span>
        </div>
    </div>
    <div class="passageway_type passageway_tabs haruyuki-mt-20">
      <div :class="['way_type',terminalIndex == item.prop ? 'active' : '']" v-for="(item,index) in terminalTypeList" :key="index" @click="clickTerminal(item.prop)">
        <img class="way_type_logo" :src="item.image"/>
        <div class="way_type_right">
          <div style="font-weight: bolder;">{{item.terminalName}} <span class="way_total" v-if="item.total">{{item.total}}</span></div>
        </div>
      </div>
    </div>
    <template v-if="terminalIndex=='0'">
      <module-terminal @total="terminalTotal"></module-terminal>
    </template>
    <template v-if="terminalIndex=='2'">
      <moduleTerminalDSF @total="terminalTotal"></moduleTerminalDSF>
    </template>
    <template v-if="terminalIndex=='3'">
      <moduleTerminalSM @total="terminalTotal"></moduleTerminalSM>
    </template>
    <template v-if="terminalIndex=='4'">
      <moduleTerminal-pos @total="terminalTotal" rptNo="20"></moduleTerminal-pos>
    </template>
    <template v-if="terminalIndex=='5'">
      <moduleTerminal-znj @total="terminalTotal" rptNo="24"></moduleTerminal-znj>
    </template>
  </basic-container>
</template>

<script>
import { queryAisleList, queryBasicAisleListPlus } from "@/api/rb-core/posinfo/pos_info_details";
import { groupCount } from "@/api/rb-core/terminal/terminal";

import moduleTerminal from "../component/module_terminal";
import moduleTerminalDSF from "../component/module_terminalDSF";
import moduleTerminalSM from "../component/module_terminalSM";
import moduleTerminalPos from "../component/module_terminal_pos";
import moduleTerminalZnj from "../component/module_terminal_znj";

export default {
  components: {
    moduleTerminal,
    moduleTerminalDSF,
    moduleTerminalSM,
    moduleTerminalPos,
    moduleTerminalZnj
  },
  data() {
    return {
      id: "",
      rpiNo: "",
      activeIndex:0,
      aisleKind:0,//2 展示,----不等于2 该通道未开放
      passType:[],//通道类型
      passData:{},//通道详情
      loading:true,
      aisleName:"",//通道名称
      terminalIndex: '0',
      terminalTypeList: [
        { id: 1, terminalName: '台卡管理', image: "/img/merchant-icon/sound.png", prop: "0", total: 0 },
        { id: 2, terminalName: '第三方管理', image: "/img/merchant-icon/sound.png", prop: "2", total: 0 },
        { id: 3, terminalName: '扫码设备管理', image: "/img/merchant-icon/sound.png", prop: "3", total: 0 },
        { id: 4, terminalName: '传统POS', image: "/img/merchant-icon/sound.png", prop: "4", total: 0 },
        { id: 5, terminalName: '智能POS', image: "/img/merchant-icon/sound.png", prop: "5", total: 0 }
      ],
      tabsType: {},
      tabsOption: {
        column: [
          {
            label: "台卡管理",
            prop: "0",
          },
          {
            label: "第三方管理",
            prop: "2",
          },
          {
            label: "扫码设备管理",
            prop: "3",
          }
        ],
      },
    };
  },
  computed: {
    base64() {
      return (val) => {
        if(val){
          if (val.indexOf('data:image/png;base64,') == -1) {
            return ('data:image/png;base64,' + val );
          } else {
            return val;
          }
        }else{
          return ''
        }
      };
    },
  },
  created() {
    this.tabsType = this.tabsOption.column[0];
    this.infoData();
    if(this.$route.query.terminalIndex){
      this.terminalIndex = this.$route.query.terminalIndex;
    }
  },
  mounted() {},
  methods: {
    handleChange(column) {
      this.tabsType = column;
    },
    clickTerminal(prop) {
      const _this = this;
      _this.terminalIndex = prop;
    },
    terminalTotal() {
      groupCount({rpiNo:this.rpiNo,eqType:1}).then(res=>{
        this.terminalTypeList[0].total = res.data.data.tkNum;
        this.terminalTypeList[1].total = res.data.data.dsfNum;
        this.terminalTypeList[2].total = res.data.data.smsbNum;
        this.terminalTypeList[3].total = res.data.data.posNum;
        this.terminalTypeList[4].total = res.data.data.znjNum;
      })
    },
    /* 
     * 点击设置背景色
     * 获取详情信息
     */
    clickActive(index){
      const _this = this;
      this.activeIndex = index;
      if (this.passType.length > 0) {
        this.aisleKind = this.passType[index].aisleKind;
        this.aisleName = this.passType[index].aisleName;
      }
      
      if(this.aisleKind == 2){
        this.loading = true;
        queryBasicAisleListPlus(this.rpiNo).then((res) => {
          if(res.data.code == 200){
            _this.passData=res.data.data;
          }
          _this.loading = false;
        }).catch(()=>{
          _this.loading = true;
        })
      }else{
        _this.loading = false;
      }
    },
    /* 页面加载 初始化请求 微信认证通道列表 接口 */
    infoData() {
      this.id = this.$route.query.id;
      this.rpiNo = this.$route.query.rpiNo;
      const _this = this;
      queryAisleList(this.rpiNo).then((res) => {
        _this.passType = res.data.data;
        _this.clickActive(0);
      });
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .basic-container {
  padding: 0;
}
/deep/.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.passageway_type{
  display: flex;
  flex-wrap: wrap;
}
.passageway_tabs {
  // border-radius: 10px;
  border-radius: 10px 10px 0 0;
  // background-color: #99a7b1;
  // border: 1px solid #EBEEF5;
  border-left: 1px solid #EBEEF5;
  border-right: 1px solid #EBEEF5;
  border-top: 1px solid #EBEEF5;
  background-color: #FFF;
  color: #303133;
  -webkit-transition: .3s;
  transition: .3s;
  // box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.15);
}
.way_type{
  display: flex;
  align-items: center;
  width: 268px;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 8px 8px 0 0;
  // margin-right: 10px;
  cursor: pointer;
  .way_type_logo{
    width: 50px;
    height: 50px;
    margin-right: 14px;
    border-radius: 50px;
  }
  .way_type_right{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }
  .way_total {
    background-color: #F56C6C;
    border-radius: 10px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    height: 18px;
    line-height: 18px;
    padding: 0 6px;
    text-align: center;
    white-space: nowrap;
    // border: 1px solid #fff;
  }
}
.passageway_header {
  border-bottom: 2px solid #E4E7ED;
  padding: 10px;
  font-size: 14px;
  font-weight: bold;
}

.status-color-green {
  color: #0ac061;
}
.status-color-red{
  color: #FE3F10;
}
.active{
  // background: #F8F9FD;
  // background-color: #e0e4e7;
  background: rgba(2, 86, 255, .1);
  -webkit-transition: 0.3s;
  transition: 0.3s;
//   box-shadow: 0 2px 12px 0 rgba(248,249,253, 0.1);
//   box-shadow: 0 2px 12px rgba(224,234,252,0.8);
}
</style>